
<template>
    <section>
        <a-menu
        mode="inline"
        :selectedKeys="current"
        :open-keys.sync="openKeys"
        :defaultSelectedKeys="defaultSelectedKeys"
        @click="handleClick">
            <a-menu-item key="/">
                <a-icon type="home" />
                <span>首页</span>
            </a-menu-item>

            <a-sub-menu key="user" @titleClick="titleClick">
                <span slot="title">
                    <a-icon type="user" />
                    <span>二级菜单</span>
                </span>
                <a-menu-item key="/A">
                    A菜单
                </a-menu-item>
                <a-menu-item key="/B">
                    B菜单
                </a-menu-item>
                <a-menu-item key="/C">
                    C菜单
                </a-menu-item>
            </a-sub-menu>
        </a-menu>
    </section>
</template>

<script>
import $tools from '@/static/tools.js'
export default {
    data() {
        return {
            // 当前选中的菜单
            current: [],
            // 初始选中的菜单
            defaultSelectedKeys: ['/'],
            // 默认展开的二级菜单
            openKeys: ['user'],
        }
    },

    mounted() {
        // 获取并设置当前菜单
        this.getMenuKey()
    },

    methods: {

        /**
         * 获取并设置当前菜单
         * @description 读取缓存并设置
         * @return void
         */
        getMenuKey() {
            // console.log(localStorage.getItem('router'))
            const router = localStorage.getItem('router')
            this.current = [router]
            this.defaultSelectedKeys = [router]
        },

        /**
         * 点击菜单每项
         * @description 设置缓存与跳转路由
         * @param {Object} e - 数据分析
         * @return void
         */
         handleClick(e) {
            // console.log(e.key)
            // 修改菜单高亮
            this.current = []
            this.current.push(e.key)
            // 将路由写入缓存并跳转
            $tools.setRouter(e.key)
            // 避免路由相同跳转
            if(this.$route.path != e.key) {
                this.$router.replace(e.key) 
            }
        },

        /**
         * 点击标题分组
         * @description 一级菜单
         * @param {Object} e - 数据集
         * @return void
         */
        titleClick(e) {
            // console.log('titleClick', e);
        },
    }
}
</script>

<style scoped>

</style>